import React from 'react';
import {Button, Input, List} from "antd";

// state and methods props from parents
const TodoUi = function (props) {

    return (
        <div style={{margin: '10px'}}>
            <Input value={props.inputVal}
                   placeholder='just do it'
                   style={{width: 200, marginBottom: '10px', marginRight: '10px'}}
                   onInput={props.handleIpt}
                   onKeyUp={e => {
                       if (e.key === 'Enter') {
                           props.handleSubmit()
                       }
                   }}
            />
            <Button type='primary' onClick={props.handleSubmit}>submit</Button>

            <List
                bordered
                dataSource={props.list}
                renderItem={
                    (item, index) => (
                        <div>
                            <List.Item onClick={() => {
                                console.log(index)
                                props.handleDel(index)
                            }}>
                                {item}
                            </List.Item>

                            <List.Item onClick={
                                props.handleDel.bind(this, index)
                            }>
                                {item}_bnd
                            </List.Item>
                        </div>

                    )
                }
            />
        </div>
    );

}
// class TodoUi extends Component {
//     render() {
//         return (
//             <div style={{margin: '10px'}}>
//                 <Input value={this.props.inputVal}
//                        placeholder='just do it'
//                        style={{width: 200, marginBottom: '10px', marginRight: '10px'}}
//                        onInput={this.props.handleIpt}
//                 />
//                 <Button type='primary' onClick={this.props.handleSubmit}>submit</Button>
//
//                 <List
//                     bordered
//                     dataSource={this.props.list}
//                     renderItem={
//                         (item, index) => (
//                             <div>
//                                 <List.Item onClick={(index) => {
//                                     console.log(index)
//                                     this.props.handleDel(index)
//                                 }}>
//                                     {item}
//                                 </List.Item>
//
//                                 <List.Item onClick={
//                                     this.props.handleDel.bind(this,index)
//                                 }>
//                                     {item}_bnd
//                                 </List.Item>
//                             </div>
//
//                         )
//                     }
//                 />
//             </div>
//         );
//     }
// }

export default TodoUi;
